<template>
  <transition name="translate">
    <div class="modification-wrap">
      <common-back :content="headerTitle"
                   class="header"></common-back>
      <div class="form-list">
        <ul>
          <li class="form-item">
            <div class="title">请输入原密码</div>
            <input type="text"
                   placeholder="请输入原密码"
                   v-model="originPassword">
          </li>
          <li class="form-item">
            <div class="title">设置新密码</div>
            <div class="get-input-box">
              <input type="text"
                     placeholder="请输新密码"
                     v-model="newPassword">
            </div>
          </li>
          <li class="form-item">
            <div class="title">重复新密码</div>
            <div class="input-box">
              <input type="text"
                     placeholder="请输入新密码"
                     v-model="againPassword">
            </div>
          </li>
        </ul>
        <common-button :content="buttonTitle"
                       @submit="handleSubmit"></common-button>
      </div>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
import { mapState } from 'vuex'
export default {
  name: 'modification',
  components: {
    CommonBack,
    CommonButton
  },
  data () {
    return {
      headerTitle: '修改密码',
      buttonTitle: '完成',
      againPassword: '',
      newPassword: '',
      originPassword: ''
    }
  },
  computed: {
    ...mapState(['person', 'contact', 'bank'])
  },
  created () {
    this.getState()
  },
  methods: {
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.postPassWord()
      }
    },
    check () {
      if (this.originPassword === '') {
        this.$toast({
          duration: 1000,
          message: '请输入原始密码'
        })
        return false
      }
      if (this.newPassword === '') {
        this.$toast({
          duration: 1000,
          message: '新密码不能为空'
        })
        return false
      }
      if (this.newPassword !== '' && this.originPassword === this.newPassword) {
        this.$toast({
          duration: 1000,
          message: '新密码不能与旧密码一样'
        })
        return false
      }
      if (this.againPassword === '' || this.newPassword !== this.againPassword) {
        this.$toast({
          duration: 1000,
          message: '两次密码输入不一致，请重新输入'
        })
        return false
      }
      return true
    },
    postPassWord () {
      const newpwd = this.newPassword
      const repeatpwd = this.againPassword
      const oldpwd = this.originPassword
      this.$api.user.changePassWord({ newpwd, repeatpwd, oldpwd })
        .then(this.postPassWordSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    postPassWordSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$toast.success({
          duration: 1000,
          message: res.msg
        })
        this.$router.push({
          path: '/me'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast.fail({
          duration: 1000,
          message: res.msg
        })
      }
    },
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        return true
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.modification-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 30
  overflow-y scroll
  padding()
  padding-top 108px
  padding-bottom 134px

  .form-list
    width 100%
    background-color $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 32px
    padding-top 43px
    padding-left 56px
    padding-right 56px
    padding-bottom 64px
    box-sizing border-box
    margin-bottom 28px

    ul
      width 100%
      margin-bottom 28px

      .form-item
        width 100%
        margin-bottom 36px

        .title
          font-size $address
          line-height 58px
          font-weight 400
          color $original_price
          text-indent 30px

        input
          width 100%
          height 92px
          background $common_bgc
          border 2px solid $border_color
          border-radius 24px
          text-indent 30px
          padding-right 10px
          box-sizing border-box
          font-size $address
          font-weight 400
          color $footer_bgc

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
